<template>
    <div>
        <h3>手提电脑</h3>
        
        <div class="pclist"  v-for="pc in pclist" :key="pc.id">
            <h3>{{pc.name}}</h3>
           <p>价格: {{pc.price}}</p>
           <button @click="goDetail(pc.id)">查看详情</button>
        </div>
    </div>
</template>

<script>
    export default {
        name:'Pc',
        data(){
            return {
                pclist: [
                    {
                        id:1,
                        name: '联想小新 air 14',
                        price: 4000

                    },
                    {
                        id:2,
                        name:'联想S2',
                        price: 3500
                    },
                    {
                        id:3,
                        name:'华硕 A0',
                        price: 36500
                    },
                    {
                        id:4,
                        name:'外星人',
                        price: 13500
                    }
                ]
            }
        },
        methods:{
            goDetail(id){
                localStorage.setItem('pid', id);
                this.$router.push(
                    {
                        name:'Detail'
                    }
                )
            }
        }
    }
</script>

<style lang="less" scoped>
.pclist{
    border: 1px solid #000;
    padding: 10px;
    position: relative;
    width: 500px;
    button{
        position: absolute;
        right:20px;
        bottom: 10px;
    }
}
</style>